<template>
	<div class="msg_link" >
		<div class="text" >
			<block v-for="(item,index) in contentList" :key="index">
				<text :class="{ isa:item.isLink }" @click="openBrowser(index)" v-if="item.name === 'text'" :style="{fontSize: fontValue + 'px'}">{{ item.text }}</text>
				<image class="emoji" v-else-if="item.name === 'img'" :src="item.src" mode="aspectFit"></image>
			</block>
		</div>
	</div>
</template>

<script>
	import {decodeText} from '@/utils/emojiMap.js'
	export default {
		name:'MsgLink',
		props:{
			msg:{
				type:Object,
				required:true
			}
		},
		data(){
			return{
				fontValue:14,
				contentList: []
			}
		},
	
		created(){
			this.fontValue = uni.getStorageSync('fontSize')
			this.processContent()
		},

		methods:{
			processContent() {
				// 首先解码表情符号
				let decodedContent = decodeText(this.msg.content)
				
				// 然后处理链接
				let reg1 = /(?:https?:\/\/)?(?:(?:www\.)?(?:[a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,}|(?:\d{1,3}\.){3}\d{1,3})(?::\d+)?(?:\/[^\s?#]*)*(?:\?[^\s#]*)?(?:#\S*)?/gi
				const ipRegex = /^(https?:\/\/)?(\d{1,3}\.){3}\d{1,3}(:\d+)?(\/[\w\- .\/?%&=]*)?$/
				
				this.contentList = []
				
				decodedContent.forEach(item => {
					if(item.name === 'img') {
						// 如果是表情，直接添加到列表
						this.contentList.push(item)
					} else {
						// 如果是文本，处理其中的链接
						let text = item.text
						let lastIndex = 0
						let match
						
						while((match = reg1.exec(text)) !== null) {
							// 添加前面的非链接文本
							if(match.index > lastIndex) {
								this.contentList.push({
									name: 'text',
									text: text.substring(lastIndex, match.index),
									isLink: false
								})
							}
							
							// 添加链接
							this.contentList.push({
								name: 'text',
								text: match[0],
								isLink: /\.(black|blue|bond|cab|cafe|cash|cc|center|chat|city|cloud|club|cn|co|com|com.cn|company|cool|cq.cn|cyou|design|email|fan|fans|fashion|fit|fj.cn|fun|fund|fyi|games|gd.cn|global|gold|gov.cn|green|group|gs.cn|guru|gx.cn|gz.cn|ha.cn|hb.cn|he.cn|hi.cn|hk|hk.cn|hl.cn|hn.cn|host|icu|info|ink|jl.cn|js.cn|jx.cn|kim|law|life|link|live|ln.cn|lotto|love|ltd|luxe|market|mba|me|media|mo.cn|mobi|name|net|net.cn|news|nm.cn|nx.cn|online|org|org.cn|organic|pet|pink|plus|poker|press|pro|promo|pub|pw|qh.cn|red|ren|run|s|sale|sc.cn|school|sd.cn|sh.cn|shop|shopping|show|site|ski|sn.cn|social|space|store|studio|sx.cn|sx.cn|tax|team|tech|technology|tj.cn|today|top|tv|tw.cn|uno|video|vin|vip|vote|voto|wang|website|wiki|work|world|xin|xj.cn|xyz|xz.cn|yn.cn|yoga|zj.cn|zone)/.test(match[0]) || ipRegex.test(match[0])
							})
							
							lastIndex = reg1.lastIndex
						}
						
						// 添加剩余的非链接文本
						if(lastIndex < text.length) {
							this.contentList.push({
								name: 'text',
								text: text.substring(lastIndex),
								isLink: false
							})
						}
					}
				})
			},
			
			openBrowser(index){
				let item = this.contentList[index]
				if(!item.isLink || item.name !== 'text') return
				
				let url = item.text
				if(!url.startsWith('http:') && !url.startsWith('https:')){
					url = 'http://' + url
				}
				
				if(url.indexOf('/#/') != -1){
					// #ifdef APP-PLUS
					plus.runtime.openURL(url, function(res) {  
					   console.log(res)  
				    })
					// #endif
					// #ifdef H5
					window.open(url)
					// #endif
				} else {
					uni.navigateTo({
						url: '/pages/room/msgBable/msgWebView?url=' + encodeURIComponent(url),
						success() {
							console.log('success')
						},
						fail(e) {
							console.log(e)
						}
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.msg_link{
		position: relative;
		padding: 14rpx;
		background-color: #ffffff;
		border-radius: 5px 0 5px 5px;
		font-size: 32rpx;
		max-width: 460rpx;
		word-wrap: break-word;
		cursor: pointer;
		.text{
			word-wrap: break-word;
		}
		.isa{
			color: #0080FF;
			text-decoration: underline;
		}
		.emoji{
			width: 1.3em;
			height: 1.3em;
			display: inline-block;
			vertical-align: text-bottom;
		}
	}
	
	.self{
		.msg_link{
			background-color: #cfe7ff;
			border-radius: 5px 0 5px 5px;
			
			&::before{
				content: none;
			}
			&::after{
				position: absolute;
				content: '';
				border-width: 10rpx;
				border-style: solid;
				border-color: #cfe7ff transparent transparent  #cfe7ff;
				top: 0;
				right: -8rpx;
			}
			.isa{
				color: #0080FF;
				text-decoration: underline;
			}
		}
	}
</style>